<form name="create_path" action="<?php echo $_SERVER['PHP_SELF']; ?>/2" method="post">
<div class ="wr">
    <div id="top">
        <div id="learning_path_information">
            <h2><?php echo $title; ?></h2>
            <span class="learning_path_description">
                <?php echo $description; ?>
            </span>
        </div>
        <div id="learning_path_functions">
            <input type="submit" name="mySubmit" value="Lưu lộ trình" />
        </div>
    </div>
    <div id="bottom">
        <div id="learning_path_content">
            <div class="spacer"></div>
        </div>
        <div id="supporting_boxs">
            <div class="box">
                <div class="box_title">
                    <h4>Thêm cấp bậc</h4>
                </div>
                <div class="box_content">
                    <input type="button" id="add_level" value="Thêm cấp bậc" onClick="show_add_level_dialog()" />
                </div>
            </div>  
        </div>
    </div>
</div>
<div id="hidden_store">
    <input type="hidden" name="learning_path_id" value="<?php echo $id['path']; ?>" />
    <input type="hidden" name="path_version_id" value="<?php echo $id['path_version']; ?>" />
</div>
</form>

<div id="add_level_form"  style="display:none;">
    <div id="temp_action"></div>
    <h1>Thêm cấp bậc</h1>
    <p>This is the basic look of my form without table</p>
    <label>Tiêu đề cấp bậc
        <span class="small">Add your name</span>
    </label>
    <input type="text" name="level_title" id="level_title"/>
    <label>Mô tả
        <span class="small">Mô tả nội dung của cấp bậc</span>
    </label>
    <textarea name="level_description" id="level_description"></textarea>
    
    <h1>Thêm hoạt động</h1>
    <p>This is the basic look of my form without table</p>
    <label>Chọn hoạt động
        <span class="small"></span>
    </label>
    <select name="permission">
        <option value="1" selected="selected" onselecte="show_add_article()">Đọc bài viết</option>
        <option value="2" onselecte="show_add_video()">Xem video</option>
        <option value="3" onselecte="show_add_link()">Liên kết tham khảo</option>
    </select>
    <label id="article_label">Bài viết
        <span class="small">Tìm nhanh bài viết</span>
    </label>
    <input id="article" name="article" type="text"
           class="ui-autocomplete-input" autocomplete="off" role="textbox"
           aria-autocomplete="list" aria-haspopup="true"/>
    <label id="article_video"   >Video
        <span class="small">Tìm nhanh video</span>
    </label>
    <input id="video" name="video" type="text"
           class="ui-autocomplete-input" autocomplete="off" role="textbox"
           aria-autocomplete="list" aria-haspopup="true"/>
    <label id="article_link">Tham khảo
        <span class="small">Tìm nhanh bài viết</span>
    </label>
    <input id="ref_title" name="ref_title" type="text"
           class="ui-autocomplete-input" autocomplete="off" role="textbox"
           aria-autocomplete="list" aria-haspopup="true"/>
    
    <label id="article_link">Đường dẫn
        <span class="small"></span>
    </label>
    <input id="link" name="link" type="text"
           class="ui-autocomplete-input" autocomplete="off" role="textbox"
           aria-autocomplete="list" aria-haspopup="true"/>
    
    <ul id="action">
    </ul>
    <input type="button" name="add_action" value="Thêm bước học" onClick="add_action()"/>
    <input type="button" name="add_level" value="Thêm cấp học" onClick="add_level()"/>
    <input type="hidden" name="action_list" value=""/>
    <div class="spacer"></div>
</div>
<script src="<?php echo base_url(). "assets/scripts/"; ?>webtoolkit.base64.js"></script>
<script>
    var title;
    var link;
    $.ajax({
        url: "get_article_list",
        dataType: "xml",
        success: function( xmlResponse ) {
            var data = $( "article", xmlResponse ).map(function() {
                return {
                    value: $( "articleTitle", this ).text(),
                    id:  $( "articleID", this ).text()
                };
            }).get();
            $( "#article")
            // don't navigate away from the field on tab when selecting an item
            .bind( "keydown", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                source: data,
                minLength: 0,
                select: function(event, ui) {
                    link= "<?php echo base_url() . "content/view/"; ?>" + ui.item.id;
                    $("#link").val(link);
                }
            });
        }
    });
    
    $( "#add_level" )
    .button()
    .click(function() {
        $( "#add_level_form" ).dialog({ disabled: false, width: 400 });
    });
    
    var level_count=0;
    var action_count=0;
    
    function add_level() {
        $( "#add_level_form" ).dialog("close");
        var hiddenTitle = document.createElement("input");
        hiddenTitle.type="hidden";
        hiddenTitle.name="level["+level_count+"][title]";
        hiddenTitle.value= $("#level_title").val();
        
        var hiddenDesc = document.createElement("input");
        hiddenDesc.type="hidden";
        hiddenDesc.name="level["+level_count+"][description]";
        hiddenDesc.value= Base64.encode($("#level_description").val());
        
        document.getElementById("hidden_store").appendChild(hiddenTitle);
        document.getElementById("hidden_store").appendChild(hiddenDesc);
        document.getElementById("hidden_store").innerHTML += document.getElementById("temp_action").innerHTML;
        document.getElementById("temp_action").innerHTML= "";
        level_count++;
        action_count=0;
    }
    
    function appendHiddenAction(type, title, link) {
        var hiddenType = document.createElement("input");
        hiddenType.type="hidden";
        hiddenType.name="level["+level_count+"][action]["+action_count+"][type]";
        hiddenType.value= type;
        
        var hiddenTitle = document.createElement("input");
        hiddenTitle.type="hidden";
        hiddenTitle.name="level["+level_count+"][action]["+action_count+"][title]";
        hiddenTitle.value= title;
        
        var hiddenLink = document.createElement("input");
        hiddenLink.type="hidden";
        hiddenLink.name="level["+level_count+"][action]["+action_count+"][link]";
        hiddenLink.value= link;
        
        document.getElementById("temp_action").appendChild(hiddenType);
        document.getElementById("temp_action").appendChild(hiddenTitle);
        document.getElementById("temp_action").appendChild(hiddenLink);
        
    }
    function add_action() {
//       var type="1";
//       var value="1";
//       var action="";
//       var title="";
//       var addedAction = document.createElement("li");
//       var anchor = document.createElement("a");
//       switch (type) {
//           case "1":
//               action="\u0110ỌC: " + title;
//               anchor.href="article/" + value;
//               anchor.innerHTML = action;
//               break;
//           case "2":
//               action="XEM: " + title;
//               anchor.href="video/" + value;
//               anchor.innerHTML = action;
//               break;
//           case "3":
//               action="THAM KH\u1ea2O: " + title;
//               anchor.innerHTML = action;
//               break;
//           default:
//               alert("B\u1ea1n chọn sai dữ liệu");
//               return false;
//       }
//       addedAction.innerHTML = action;
//       document.getElementByid("action").appendChild(addedAction);
        appendHiddenAction(1, $("#article").val(), link);
        action_count++;
    }
    
    
    function show_add_article() {
        $("#article").show();
        $("#video").hide();
        $("#link").hide();
    }
    
    function show_add_video() {
        $("#article").hide();
        $("#video").show();
        $("#link").hide();
    }
    
    function show_add_link() {
        $("#article").hide();
        $("#video").hide();
        $("#link").show();
    }
    
    function encode64(str) {
        if (!window.btoa) {
            window.btoa = function(str) {
                return Base64.encode(str);
            }
        }
    }
    
    function decode64(str) {
        if (!window.atob) {
            window.atob = function(str) {
                return Base64.decode(str);
            }
        }
    }
</script>